<!DOCTYPE HTML5>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Table</title>
        <!--link rel="stylesheet" type="text/css" href="../css/mrspliter.css"/-->
        <script type="text/javascript" src="../../mootools/mootools-core-1.4.5.js"></script>
        <script type="text/javascript" src="utils.mootools.1.4.5.js"></script>
    </head>
    <script type="text/javascript" charset="utf-8">
        //Test object
        var ooo = {
            oo1: {
                oo11:{
                    oo111:"hello"
                },
                oo12: "more text"
            },
            oo2: "another text",
            oo3: ['an', 'array', 'of', 'text'],
            oo4: [{oa41:'an'},{oa42:'array'},{oa43:'of'},{oa44:'objects'}],
            ff1: function(){
                alert('function without parameters');
            },
            
            ff2: function(p1, p2){
                alert('function with parameters, value of p1: ' + p1 + ' value for p2: ' + p2);
            },
            
            ff3: function(){
                return 'this function returns this text';
            }
        };
        
        window.addEvent('domready', function(){
            
        });
    </script>
    <style>
        .mrbodycontainer{
            overflow:auto;
            display:block;
        }
        
        .mrheadcontainer{
            overflow:hidden;
            display:block;
        }
        
        .mrtablecontainer{
            overflow:hidden;
            display:block;
            padding:-1px;
        }
        
        th {
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            margin:0px;
            border:solid black 1px;
            padding:4px;
        }
        
        td{
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            margin:0px;
            border:solid black 1px;
            padding:4px;
        }
        
        table{
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            border-collapse:collapse;
            border:solid black 1px;
            padding:0px;
        }
        
    </style>
    <body>
        <h1>MRUI</h1>
        <h2>mrtable</h2>
        <h3>Example 1</h3>
        <!--div class="mrtablecontainer" style="width:400px;height:100px;"  style="width:100px;"-->
            <!--div-->
                <table class="mrtable" style="height:100px;">
                    <thead>
                        <tr>
                            <th>Year</th>
                            <th>Month</th>
                            <th>Amount (in millions)</th>
                            <th>Differences with last year</th>
                        </tr>
                    </thead>
                <!--/table-->
            <!--div-->
            <!--table-->
                <tbody>
                    <tr>
                        <td>2005</td>
                        <td>January</td>
                        <td>$100</td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>2005</td>
                        <td>February</td>
                        <td>$80</td>
                        <td>22</td>
                    </tr>
                    <tr>
                        <td>2005</td>
                        <td>March</td>
                        <td>$80</td>
                        <td>33</td>
                    </tr>
                    <tr>
                        <td>2005</td>
                        <td>April</td>
                        <td>$80</td>
                        <td>44</td>
                    </tr>
                    <tr>
                        <td>2005</td>
                        <td>May</td>
                        <td>$80</td>
                        <td>55</td>
                    </tr>
                    <tr>
                        <td>2005</td>
                        <td>June</td>
                        <td>$80</td>
                        <td>66</td>
                    </tr>
                    <tr>
                        <td>2005</td>
                        <td>July</td>
                        <td>$80</td>
                        <td>77</td>
                    </tr>
                    <tr>
                        <td>2005</td>
                        <td>August</td>
                        <td>$80</td>
                        <td>88</td>
                    </tr>
                </tbody>
                
            </table>
        <!--/div-->
        <br/><br/>
        <div class="mrtable">{"thead":["Col 1","Col 2","Col 3","Col 4"],"tbody":[]}</div>
    </body>
</html>
